<style lang="scss" scoped>
.container {
    line-height: 40px;
    background-color: rgb(254, 249, 240);
    font-size: 14px;
    text-align: center;
    color: rgb(254, 172, 8);
}

dl {
    padding: 10px;
    display: flex;
    align-items: center;
    height: 100px;

    dd {
        margin-left: 10px;
        font-size: 14px;
        display: flex;
        flex-direction: column;

        .namedoctor {
            display: flex;
            align-items: center;
            padding: 0 10px;

            span {
                margin-left: 10px;
                font-size: 12px;
                font-weight: 600;
            }
        }

        .typedoctor {
            display: flex;
            padding: 0 10px;

            p {
                color: #ccc;
                font-size: 12px;
            }
        }
    }
}

.titleZiXun {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;

    .textDa {
        display: flex;
        justify-content: space-between;
        height: 40px;
        align-items: center;
        padding: 10px;

        p {
            display: flex;
            align-items: center;
            height: 100%;

            img {
                width: 20px;
                height: 20px;
            }
        }
    }

    .textXiao {
        width: 98%;
        padding: 10px;
        margin-left: 1%;
        display: flex;
        flex-direction: column;
        background-color: rgb(247, 248, 249);
        height: 200px;
        border-radius: 10px;
    }
}

.contentList {
    width: 100%;
    height: 500px;
    display: flex;

    .List {
        width: 200px;
        height: 500px;
        background-color: #ececec;
        overflow-y: scroll;

        li {
            opacity: 1;
            line-height: 30px;
            padding: 10px;
        }

        .active {
            background-color: #fff;
            color: rgb(30, 111, 255);
        }
    }

    .ListItem {
        width: 200px;
        float: left;
        height: 500px;
        overflow-y: scroll;

        .ListItem_item {
            width: 100px;
            line-height: 50px;
            padding: 10px;
        }

        .active {
            color: rgb(30, 111, 255);
        }
    }

}

.Keshi {
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    padding: 10px;
    font-size: 14px;

    span {
        color: #dcdcdc;
    }

    .active {
        color: rgb(30, 111, 255);
    }
}

.content {
    display: flex;
    justify-content: space-between;
    padding: 10px;

    p {
        color: #dcdcdc;
        font-size: 14px;
    }

    span {
        color: rgb(30, 111, 255);
        font-size: 14px;
    }
}

.ShangChan {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;

    .Chuan {
        display: flex;
        flex-direction: column;

        p {
            padding: 0 10px;
            font-size: 14px;
        }

        span {
            padding: 3px 10px;
            font-size: 11px;
            color: #dcdcdc;
        }
    }

    p {
        display: flex;
        align-items: start;
        height: 100%;
        padding: 10px;

        img {
            width: 20px;
            height: 20px;
        }
    }
}

.imgShang {
    height: 200px;
    position: 10px;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    opacity: 999;
    border: none;
    border-radius: 50px;
    background-color: rgb(30, 111, 255);
    color: #fff;
}
</style>
<template>
    <div>
        <van-nav-bar title="图片咨询" left-text="返回" left-arrow @click-left="router.go(-1)" />
        <div class="container">急重症患者不适合网上诊疗/咨询,请前往医院就诊</div>
        <dl>
            <dt><img :src="doctorListitem?.doctorimage"
                    style="width:50px;height: 50px;border-radius: 50px;border: 1px solid #ccc;" alt="">
            </dt>
            <dd>
                <div class="name">
                    <div class="namedoctor">
                        <h3>{{ doctorListitem?.doctorname }}</h3>
                        <span>{{ doctorListitem?.doctorstate }}</span>
                    </div>
                    <div class="typedoctor" style="font-size: 12px;">
                        <p>{{ doctorListitem?.doctorcity }}</p>
                        <p>{{ doctorListitem?.doctoradministre }}</p>
                    </div>
                </div>
            </dd>
        </dl>
        <div class="titleZiXun">
            <div class="textDa">
                <h2>请填写病情描述</h2>
                <p><img src="../../../../assets/img/云端上传.png" alt=""><span>导出历史病情</span></p>
            </div>
            <div class="textXiao">
                <van-cell-group inset>
                    <van-field v-model="message" rows="6" type="textarea" maxlength="500" autosize
                        style="background-color: rgb(247, 248, 249);height: 100%;"
                        placeholder="请详细描述咨询人当前的病情状况、最近医院就医用药情况以及需要医生解答的问题如有检查资料请确保清晰可见后上传，以便医生能更全面了解病况并提供专业的指导意见。问题提交后无法修改或补充信息"
                        show-word-limit />
                </van-cell-group>
            </div>
            <div class="Keshi">
                <p>科室</p>
                <span @click="show = true" :class="TapText ? 'active' : ''">{{ TapText ? Taptitle : '请选择>' }}</span>
            </div>
            <div class="ShangChan">
                <div class="Chuan">
                    <p>请上传体检报告或患处照片</p>
                    <span>照片仅自己和医生可见(最多9张)</span>
                </div>
                <p><img src="../../../../assets/img/云端上传.png" alt=""><span>导出历史病情</span></p>
            </div>
            <div class="imgShang">
                <van-uploader :max-count="9" v-model="fileList" multiple>
                    <img @click="afterRead" src="../../../../assets/img/上传.png" alt=""
                        style="width: 100px;height: 100px;">
                </van-uploader>
            </div>
        </div>
        <button class="footer" style="background-color: rgb(180, 204, 248)" disabled v-if="TextOne">
            下一步
        </button>
        <!-- <button class="footer" v-else @click="router.push('/zixunItemimg')"> -->
        <button class="footer" v-else @click="router.push('/zixunItemimg?id=' + listId)">
            下一步
        </button>

        <van-action-sheet v-model:show="show">
            <div class="content">
                <p @click="show = false">取消</p>
                <h2>重选科室</h2>
                <span @click="show = false">确定</span>
            </div>
            <div class="contentList">
                <div class="List">
                    <li v-for="(item, i) in KeShiTap" :key="i" @click="active(item, i)"
                        :class="activeIndex === i ? 'active' : ''">{{
                            item
                        }}</li>
                </div>
                <div class="ListItem">
                    <div v-for="(item, i) in KeShi" :key="i" class="ListItem_item" @click="active1(item, i)"
                        :class="activeIndex1 === i ? 'active' : ''">{{ item }}</div>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import type { ListDatagete } from '@/Type/indeType';
import axios from 'axios';
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const message = ref('');
const show = ref(false);
const route = useRoute()
const listId = ref(route.query.id as string | undefined);
const doctorListitem = ref<ListDatagete>()

const getData = () => {
    axios.get('/api/doctor/detail', { params: { id: listId.value } }).then(res => {
        doctorListitem.value = res.data.data[0]
    })
}
getData()
const KeShiTap = ref<string[]>([])
const KeShi = ref<string[]>([])
const activeIndex = ref(0)
const activeIndex1 = ref(0)
const Taptext = ref('')
const Taptitle = ref('')
const TapText = ref(false)
const TextOne = ref(true)
const active = (v: string, i: number) => {
    activeIndex.value = i
    axios.get('/api/office/list').then(res => {
        KeShi.value = []
        res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
            if (item.adminname == v) {
                KeShi.value.push(item.adminchildrenname)
            }
        })
    })

}
axios.get('/api/office/list').then(res => {
    res.data.data.forEach((item: { adminname: string, adminchildrenname: string }) => {
        KeShiTap.value.push(item.adminname)
        KeShiTap.value = [...new Set(KeShiTap.value)]
        if (item.adminname == '内科') {
            KeShi.value.push(item.adminchildrenname)
        }
    })
})
const active1 = (v: string, i: number) => {
    activeIndex1.value = i
    Taptext.value = v
}
watch(Taptext, (newVal, oldVal) => {
    Taptitle.value = newVal
    TapText.value = true

})
watch(message, (newVal, oldVal) => {
    message.value = newVal
    if (message.value.length >= 5) {
        TextOne.value = false
    }

})

const afterRead = (file: any) => {
    // 此时可以自行将文件上传至服务器
    console.log(file);
};
const fileList = ref([]);
const headButton = () => {
    console.log(111);

}
</script>
